<template>
  <div class="">
    <!-- 搜索 -->
    <SearchBlock ref="searchBlockRef" @clickQuery="clickQuery" @clickAdd="clickAdd">
    </SearchBlock>

    <hz-table ref="tableRef" :tableConfig="tableConfig" @pageChange="clickQuery" :columnSelection='false'>
      <template #action="{ column, record, text, index }">
        <el-button type="primary" size="small" link @click="clickEdit(record)">编辑</el-button>
        <el-button type="danger" size="small" link @click="clickDel(record)">删除</el-button>
      </template>
    </hz-table>

    <!-- 详情 -->
    <hz-dialog v-model="dialog.show" :title="dialog.title">
      <add-edit :formConfig="formConfig"></add-edit>
    </hz-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watchEffect, getCurrentInstance } from "vue";
import SearchBlock from "./stSearchBlock.vue";
import AddEdit from "./stAddEdit.vue";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { moment } = proxy.$util
const searchBlockRef = ref(null);
const tableRef = ref(null);
// 表格数据
const tableConfig = reactive({
  columns: [
    { label: "店铺名称", prop: "storeName", 'width': 200 },
    { label: "店铺地址", prop: "storeAddress", 'width': 200, },
    { label: "菜品类型", prop: "foodType", 'width': 500, showTooltip: false },
    { label: "打印机SN", prop: "printerSn", 'width': 120 },
    { label: "店家", prop: "merchantName", 'width': 80 },
    { label: "店家身份证", prop: "merchantIdNum", 'width': 180 },
    { label: "店家手机号", prop: "merchantPhone", width: 150, },
    { label: "店家微信号", prop: "merchantWechatNum", width: 120, },
    { label: "分类", prop: "categoryName", width: 100, },
    { label: "描述", prop: "storeDescription", 'width': 180 },
    { label: "操作", prop: "action", 'width': 100, scopeVal: true, fixed: 'right'},
  ],
  dataSource: [],
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const dialog = reactive({
  show: false,
})
const formConfig = reactive({
  dataObj: {},
  type: 'add',
  dialog: dialog,
  okCallback: clickQuery,
})

onMounted(() => {
  clickQuery();
})

// 点击查询
function clickQuery(data) {
  if (!data) {
    searchBlockRef.value.clickQuery();
    return;
  }
  let { pageSize, pageNo, total } = tableConfig
  let param = { ...data, pageSize, pageNo };

  proxy.$http.get('/jx/jxStoreManage/queryStoreByKeyword', { params: param, }).then(res => {
    if (res.code == 200) {
      tableConfig.dataSource = Array.isArray(res.result.stores) ? res.result.stores : [];
      tableConfig.total = res.result.totalCount
    } else {
      tableConfig.total = 0;
    }
  })
}

// 点击新增按钮
function clickAdd(record) {
  dialog.show = true;
  dialog.title = '创建店铺';
  formConfig.type = 'add';
  formConfig.dataObj = {
    storeName: '',
    storeDescription: '',
    logo: '',
    qualification: '',
    storePrice: '',
    merchantName: '',
    merchantIdNum: '',
    merchantPhone: '',
    merchantWechatNum: '',
    storeAddress: '',
    longitude: 114.058399,
    latitude: 22.554977,
    categoryId: '',
    categoryName: '',
    printerSn: '',
    foodType: [],
    businessStart_date: new Date('2024-1-1 19:00:00'),
    businessEnd_date: new Date('2024-1-2 10:00:00'),
  }
}

// 点击编辑按钮
function clickEdit(record) {
  dialog.show = true;
  dialog.title = '编辑店铺';
  formConfig.type = 'edit';
  formConfig.dataObj = { ...record };
  formConfig.dataObj.businessStart_date = new Date('2024-1-1 ' + formConfig.dataObj.businessStart)
  formConfig.dataObj.businessEnd_date = new Date('2024-1-1 ' + formConfig.dataObj.businessEnd)
}

// 点击删除按钮
function clickDel(record) {
  let msg = `确定删除店铺【${record.storeName}】？`
  proxy.$util.confirmBox({ msg, okFun: submitDelele, funParam: record.id})
}

// 执行删除
function submitDelele(storeId = '') {
  let url = `/jx/jxStoreManage/deleteStoreById?storeId=${storeId}`
  proxy.$http.delete(url, { successTip: true }).then(res => {
    if (res.code == 200) {
      clickQuery();
    }
  })
}

</script>
<style lang="scss" scoped></style>
